<template>
    <div class="mr-item">
            <div class="info">
                <img class="homeItem" :src="r.author.avatar_url" alt="">
                <span class="author-name">{{r.author.loginname}}</span>
                <span :class="{ 'text-tab': active, 'text-top': isActive }">{{getTab(r.top,r.good,r.tab)}}</span>
                <router-link :to="'/everylist/'+r.id">
                    <p class="text-title">{{r.title}}</p>                                                      
                </router-link>                                
                
                <p class="text-count">
                    <i class="icon-eye-open"></i><span>{{r.visit_count}}  </span>
                    <i class="icon-comment-alt"></i><span>{{r.reply_count}}  </span>
                    <span>创建于:{{getTime(r.create_at)}}</span>
                </p>
                                             
            </div>    
    </div>
</template>
<script>
    export default{
        props:['r'],
        data(){
            return{
                active:true,
                isActive:false,
            }   
        },
        methods:{
            getTime(time){
                time=new Date(time)
                var year=time.getFullYear()
                var month=time.getMonth()+1
                var date=time.getDate()
                var hour=time.getHours()
                var minute=time.getMinutes()
                var second=time.getSeconds()
                month=month>9?month:'0'+month
                date=date>9?date:'0'+date
                hour=hour>9?hour:'0'+hour
                minute=minute>9?minute:'0'+minute
                second=second>9?second:'0'+second
                //es5的写法
                return year + '-' + month + '-' + date + ' ' 
                + hour + ':' + minute + ':' + second
            },
            getTab(top,good,tab){
                if(top==true){
                    tab='置顶'
                    this.active=false
                    this.isActive=true
                } 
                if(good==true&&top!=true){
                    tab='精华'
                    this.active=false
                    this.isActive=true
                }
                if(top!=true&&good!=true){
                    switch(tab){
                        case 'share': 
                            tab="分享";
                            break;
                        case 'ask': 
                            tab="问答";
                            break;
                    }
                }
                return tab
            }  
        }
    }
    
</script>

<style>
    .info{
        border-bottom: 1px solid #ccc;
        width: 90%;
        margin: 0 auto;
        padding: 10px;
    }
    .author-name{
        font-size: 18px;
        color: #999;
        margin-left: 10px;
        display: inline-block;
        position: relative;
        top: -10px;
    }
    .text-tab{
        color: #0e77e4;
        background: #ccc;
        margin-left: 10px;
        padding: 3px;
        border-radius: 5px;
        display: inline-block;
        position: relative;
        top: -10px;
    }
    .text-top{
        color: #fff;
        background: #0e77e4;
        margin-left: 10px;
        padding: 3px;
        border-radius: 5px;
        display: inline-block;
        position: relative;
        top: -10px;
    }
    img.homeItem{
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }
    .text-title{
        font-size: 18px;
        margin: 10px 0;
    }
    .text-count{
        color: #999;
    }
    
</style>